﻿$$(function () {
    $$.initPagingLoader({
        pageSize: 20,
        containerSelector: "#xyh-detail-content",
        listSelector: "#xyh-detail-list-ul",
        loadData: ajaxLoadPageData,
        render: appendItems,
        renderEmpty: function (jqList, jqContainer) { $.toast("暂无数据！"); }
    });
});

//获取页数据
function ajaxLoadPageData(args) {
    var pageIndex = args.pageIndex;
    var pageSize = args.pageSize;
    var ar = args.ar;
    var eventType = args.eventType;

    console.dir(args);
    //ar.fail() 失败时调用
    //ar.done(data) 成功时调用，data:null 表示无数据

    console.log("加载页：" + pageIndex);

    //参数
    var postData = {
        pageIndex: pageIndex,
        pageSize: pageSize
    };

    //返回值数据结构
    var data = {
        totalRecordCount: 20,
        records: [{
            action: "充值",
            time: "2016-01-10 10:01:10",
            money: -(2000 * Math.random()).toFixed(2)
        }]
    };

    //模拟 ajax 过程
    setTimeout(function () {
        data.records = [];
        for (var i = 0; i < pageSize; i++) {
            data.records[i] = {
                action: i % 2 == 0 ? "充值" : "提现",
                time: "2016-01-10 10:01:10",
                money: (i % 2 == 0 ? "" : "-") + (2000 * Math.random()).toFixed(2)
            };
        }
        ar.done(data);
    }, 1000);
}

//动态新增条目
function appendItems(data, jqList, jqContainer) {
    var record, html, item;
    for (var i = 0; i < data.records.length; i++) {
        var record = data.records[i];
        html = item_data_bind(record);
        item = $$(html);
        item.appendTo(jqList);
    }
}
//单条数据绑定
function item_data_bind(record) {
    //操作时变动的金额
    var _money = record.money;
    if (isNaN(_money)) {
        _money = 0;
    }
    var _style = "";
    if (_money >= 0) {
        _style = "#89b82a;\">+" + _money;
    } else {
        _style = "#dd5519;\">" + _money;
    }

    var _item = "<li><a href=\"#\" class=\"item-link item-content\">" +
                "<div class=\"item-inner\">" +
                    "<span class=\"detail-action\">" + record.action + "</span>" +
                    "<span class=\"detail-time\">" + record.time + "</span>" +
                "</div>" +
                "<span class=\"detail-money\" style=\"color:" + _style + "</span>" +
                "</a></li>";
    return _item;
}